<template>
  <div class="HotZB">
    <h3 class="MXZB">明星主播</h3>
    <ul>
      <li v-for="item in MXZBlist" :key="item.id">
        <a href="javascript:;">
          <img :src="item.picUrl" alt="">
        </a>
        <div class="info">
          <p class="name">
            <a href="javascript:;" style="" class="nameA">{{item.name}}</a>
            <sup></sup>
          </p>
          <p class="conten">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
 data: () => ({
   MXZBlist:[]
 }),
  created() {
    this.getMXZB()
  },
  methods: {
    async getMXZB(){
      try {
        const res=await this.Api.cyzApi.getMXZB()
        this.MXZBlist=res.data.djRadios.slice(4,9)
      } catch (error) {
        // alert("获取明星主播失败"+error)
        console.log("获取明星主播失败"+error)
      }
    }
  }
};
</script>
<style lang="less">
.HotZB{
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust: none;
  .MXZB{
    position: relative;
    height: 23px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 100%;
  }
  ul{
    margin: 20px 0 0 20px;
      li{
        list-style: none;
        float: left;
        width: 210px;
        height: 50px;
        padding: 0;
        margin: 0;
          a{
            float: left;
            margin-right: 10px;
            cursor: pointer;
            text-decoration: none;
            color: #333;
              img{
                width: 40px;
                height: 40px;
                box-shadow: 0 0 1px #333333 inset;
                cursor: pointer;
                border: 0;
              }
          }
          .info{
            float: left;
            width: 160px;
            line-height: 21px;
            text-align: -webkit-match-parent;
              .name{
                width: 100%;
                line-height: 21px;
                font-size: 12px;
                color: #333;
                font-family: Arial, Helvetica, sans-serif;
                -webkit-text-size-adjust: none;
                  a{
                    display: inline-block;
                    zoom: 1;
                    vertical-align: middle;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #000;
                    cursor: pointer;
                    line-height: 21px;
                    font-size: 12px;
                    color: #333;
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;
                    line-height: 21px;
                    font-size: 12px;
                    color: #333;
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;
                    float: left;
                    margin-right: 10px;
                    cursor: pointer;
                    text-decoration: none;
                    color: #333;
                  }
                  .nameA:hover{
                    text-decoration: underline;
                  }
                  sup{
                    margin-top: -1px;
                    width: 11px;
                    height: 13px;
                    background: url('../../../../../assets/cyzimgs/xuebitu6.png');
                    background-position: 0 1px;
                    font-size: 100%;
                    font-style: normal;
                    display: inline-block;
                    overflow: hidden;
                    vertical-align: middle;
                  }
              }
              .conten{
                width: 100%;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0;
                margin: 0;
                line-height: 21px;
              }
          }
      }
  }
  ul::after{
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
  }
}
</style>